import { NavBar, Icon, ImagePicker, Toast } from 'antd-mobile';
import ReactWeui from 'react-weui';
const { Button } = ReactWeui;
import { history, Link } from 'umi';
import styles from './feedback.less';
import { useState } from 'react';
import classnames from '@/utils/classnames';
import weui from 'weui.js';
import { uploadImage } from '@/api/aliyun';
import request from '@/utils/request';

export default function FeedbackPage() {
  const [files, setFiles] = useState([]);
  const [multiple, setMultiple] = useState(false);

  function navBarGoBack() {
    history.goBack();
  }

  // 上传日志
  function handleUploadLog() {
    let $loading = weui.loading('上传日志中...');
    setTimeout(() => {
      $loading.hide();
      weui.toast('上传成功', { duration: 1500 });
    }, 1500);
  }

  const onChange = (files, type, index) => {
    console.log(files, type, index);
    setFiles(files);
  };

  const onSegChange = (e) => {
    const index = e.nativeEvent.selectedSegmentIndex;
    setMultiple(index === 1);
  };

  // 提交数据
  async function handleSubmit() {
    // 上传图片
    if (!files || !(files.length > 0)) {
      weui.topTips('请选择图片', { duration: 1500 });
      return false;
    }

    let $loading = weui.loading('上传图片...');
    let imgUrls = [];
    for (const file of files) {
      const res = await uploadImage(file.file);
      console.log(res);
      imgUrls.push(res.url);
    }
    // files.forEach(async file => {
    //   const res = await uploadImage(file.file)
    //   console.log(res);

    // })
    $loading.hide();
    // weui.toast("上传成功")

    let $loading1 = weui.loading('提交中...');
    // 上传数据

    request('', {
      method: 'post',
      requestType: 'form',
      data: {
        imgUrls: imgUrls,
      },
    }).then(() => {
      $loading1.hide();
    });
  }

  return (
    <>
      <div className={classnames('page navbar', styles.page)}>
        <div className="page__navbar">
          <NavBar
            style={{ color: '#000000' }}
            mode="light"
            icon={<Icon type="cross" />}
            leftContent="意见反馈"
            onLeftClick={navBarGoBack}
            rightContent={[
              <span key="0" className="btn-text" onClick={handleUploadLog}>
                上传日志
              </span>,
              // <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
              // <Icon key="1" type="ellipsis" />,
            ]}
          >
            {/* JSAPI支付 */}
          </NavBar>
        </div>

        <div>
          <div className={styles.desc}>请选择你的问题分类</div>
          <div className={styles['form-item__bd']}>
            <textarea
              className="weui-textarea"
              placeholder="请描述你所发生的问题"
              rows={3}
            ></textarea>
          </div>
          <div className={styles.desc}>截图（选填）</div>
          <div className={styles['form-item__bd']}>
            <ImagePicker
              files={files}
              onChange={onChange}
              onImageClick={(index, fs) => console.log(index, fs)}
              selectable={files.length < 7}
              multiple={multiple}
            />
          </div>
          <div className={styles.desc}>联系方式（选填，便于我们与你联系）</div>
          <div className={styles['form-item__bd']}>
            <input
              className="weui-input"
              type="text"
              placeholder="请输入手机号"
            ></input>
          </div>
        </div>

        <div style={{ height: '80px' }}></div>
        <Button onClick={handleSubmit}>确认</Button>
      </div>
    </>
  );
}
